
import { Navbar } from "@/components/Navbar";
import { Footer } from "@/components/Footer";
import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { 
  Users, 
  ArrowRight,
  GraduationCap,
  HelpCircle,
  Share2,
  Plus,
  BookOpen,
  MessageCircle,
  Brain
} from "lucide-react";
import { useLanguage } from "@/contexts/LanguageContext";
import { useRole } from "@/contexts/RoleContext";
import { useState } from "react";
import { CommunityStats } from "@/components/community/CommunityStats";
import { CommunityFilters } from "@/components/community/CommunityFilters";
import { UpcomingEvents } from "@/components/community/UpcomingEvents";
import { ZoneSelector } from "@/components/community/ZoneSelector";
import { TeacherDiscussions } from "@/components/community/TeacherDiscussions";
import { StudentDiscussions } from "@/components/community/StudentDiscussions";
import { TeacherStudentZone } from "@/components/community/TeacherStudentZone";
import { StudyGroups } from "@/components/community/StudyGroups";
import { TeacherDiscussionFeed } from "@/components/community/TeacherDiscussionFeed";
import { RecommendedCommunities } from "@/components/community/RecommendedCommunities";
import { StudentHub } from "@/components/community/StudentHub";

const Community = () => {
  const { t } = useLanguage();
  const { role } = useRole();
  const [selectedFilter, setSelectedFilter] = useState("all");
  const [searchQuery, setSearchQuery] = useState("");
  const [activeZone, setActiveZone] = useState("student");

  // Teacher View Content
  if (role === 'teacher') {
    return (
      <div className="min-h-screen flex flex-col">
        <Navbar />
        
        <main className="flex-1 py-12 bg-gray-50">
          <div className="container mx-auto px-4">
            <div className="max-w-7xl mx-auto">
              {/* Teacher Hero Section */}
              <div className="text-center mb-16">
                <h1 className="text-4xl font-extrabold text-gray-900 dark:text-gray-100 mb-4">
                  Educator Hub
                </h1>
                <p className="text-gray-600 dark:text-gray-400 text-lg">
                  Connect with fellow educators, share best practices, and co-create transformative learning experiences
                </p>
              </div>

              {/* Teacher Community Stats */}
              <CommunityStats role="teacher" />
              
              <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
                {/* Left Sidebar */}
                <div className="lg:col-span-1 space-y-6">
                  <CommunityFilters 
                    searchQuery={searchQuery}
                    setSearchQuery={setSearchQuery}
                    selectedFilter={selectedFilter}
                    setSelectedFilter={setSelectedFilter}
                    role="teacher"
                  />
                  <UpcomingEvents role="teacher" />
                </div>
                
                {/* Main Content */}
                <div className="lg:col-span-2">
                  <div className="space-y-6">
                    {/* Discussion Feed */}
                    <TeacherDiscussionFeed />
                    
                    {/* Recommended Communities */}
                    <RecommendedCommunities />
                  </div>
                </div>
              </div>
              
              {/* Updated CTA Section */}
              <div className="mt-16 text-center">
                <h2 className="text-2xl font-bold text-gray-900 dark:text-gray-100 mb-4">
                  Create Your Own Educator Community
                </h2>
                <p className="text-gray-600 dark:text-gray-400 text-lg mb-8">
                  Start a teaching group, research cluster, or collaborative project to empower shared growth and innovation.
                </p>
                <Button size="lg" className="bg-green-600 hover:bg-green-700">
                  <Plus className="w-4 h-4 mr-2" />
                  Start a New Community
                  <ArrowRight className="w-4 h-4 ml-2" />
                </Button>
              </div>
            </div>
          </div>

          {/* Floating Share Resource Button */}
          <div className="fixed top-24 right-6">
            <Button size="lg" variant="outline" className="rounded-full shadow-lg bg-white hover:bg-gray-50">
              <Share2 className="w-5 h-5 mr-2" />
              Share a Resource
            </Button>
          </div>
        </main>
        
        <Footer />
      </div>
    );
  }

  // Student View - Now using new StudentHub component
  return (
    <div className="min-h-screen flex flex-col">
      <Navbar />
      
      <main className="flex-1 py-12 bg-gray-50">
        <div className="container mx-auto px-4">
          <div className="max-w-7xl mx-auto">
            <StudentHub />
          </div>
        </div>
      </main>
      
      <Footer />
    </div>
  );
};

export default Community;
